<!DOCTYPE html>
<html lang="en">
<head>
    <!--
    @Author 硕鼠
    @Date 2020/4/17 11:04
    @Version 1.0
    @Description 表单学习
  -->
    <meta charset="UTF-8">
    <title>登录注册</title>
</head>
<body>
    <h1>注册</h1>
<!--表单
action:表单提交的位置,可以是网站,也可以是一个请求处理地址
method:post,get提交方式
get在提交的方式中可以看到我们的url(http://localhost:63342/HTML-study/a02basicLabel.html?username=xiaolun&pwd=123),不安全,但是高效
其中,url中的"username=xiaolun&pwd=123"分别和 name="username"和name="pwd"对应。
post:比较安全,传输大文件.
-->
    <form action="a02basicLabel.html" method="get">
        <!-- 文本输入框:input type="text"
        name="username"给input标签起一个名字
        密码框:type="password"
        提交:type="submit"
        重置:type="reset"
        -->
        <p>名字: <input type="text" name="username" placeholder="请输入用户名" required></p>
        <p>密码: <input type="password" name="pwd" value="123" hidden></p>

        <!--单选框
             value="boy":单选框的值（"男"只是修饰一下value）。
             name="sex":表示组。
        -->
        <p>性别
            <input type="radio" value="boy" name="sex" checked disabled/>男
            <input type="radio" value="girl" name="sex"/>女
        </p>

        <!--多选框
            &hobby=sleep&hobby=code
        -->

        <p>爱好：
            <input type="checkbox" value="sleep" name="hobby"/>睡觉
            <input type="checkbox" value="code" name="hobby"/>敲代码
            <input type="checkbox" value="chat" name="hobby"/>聊天
        </p>

        <!-- 按钮
        value：表示按钮上面的字
        -->
        <p>按钮：
            <input type="button" name="btn1" value="点击变长">
            <!--图片按钮,点击后和submit同-->
            <input type="image" src="../src/resources/image/1.jpg">

        </p>

        <!-- 下拉框
        selected:默认选中
        提交表单;&列表名称=US
        -->
        <p>下拉框：
            <select name="列表名称" id="">
                <option value="china">中国</option>
                <option value="US" selected>美国</option>
                <option value="eth">瑞士</option>
            </select>
        </p>
        <!-- 文本域
        提交表单;&textarea=wenben(文本域内容)
        cols="10" rows="10";行和列
        -->
        <p>反馈（文本域）：
            <textarea name="textarea" cols="10" rows="10">文本内容</textarea>
        </p>


        <!-- 文件域
      提交表单:&files=大.jpg
      -->
        <p>文件域：
            <input type="file" name="files"/>
            <input type="button" value="上传" name="upload"/>
        </p>
<!-- 滑块 -->
        <p>音量：
        <input type="range" name="voice" min="0" max="100" step="1"/>
    </p>
        <!-- 搜索框-->
        <p>搜索：
            <input type="search" name="search" />
        </p>

        <!-- 增强鼠标可用性-->
        <p>
            <label for="mark">你点我试试</label>
            <input type="text" id="mark"/>
        </p>

        <!-- 正则判断-->
        <p>自定义邮箱：
            <input type="text"name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">
        </p>



        <input type="submit">
        <input type="reset">
    </form>
</body>
</html>